<template>
  <q-page class="row no-wrap">
    <div class="column">
      <page-left-menu
        class="col"
        title="Profiles"
        color="#3498DB"
        :menus="menus"
        @onChange="onMenuChange"
        :currentUser="currentUser"
        v-if="currentUser"
      />
      <div class="column">
        <q-btn
          class="q-my-md"
          flat
          dense
          text-color="sub"
          label="Report"
          no-caps
        />
      </div>
    </div>

    <div style="width: 100%" class="column" v-if="currentUser">
      <q-scroll-area class="fit">
        <div class="banner row">
          <q-img
            width="100%"
            height="100%"
            class="image"
            :src="
              currentUser.banner
                ? currentUser.banner
                : 'images/default-banner.png'
            "
          ></q-img>
          <div class="col" />
          <div class="column">
            <div class="row">
              <q-btn round icon="mdi-facebook" />
              <q-btn round icon="mdi-twitter" />
              <q-btn round icon="mdi-youtube" />
              <q-btn round icon="mdi-artstation" />
            </div>
          </div>
        </div>
        <router-view v-if="currentUser" />
      </q-scroll-area>
    </div>
  </q-page>
</template>
<script setup lang="ts">
import { ref, computed, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
import PageLeftMenu from 'pages/my/ProfileViews/ProfilePageLeft.vue';
import { PageLeftItem } from 'layouts/components/PageLeftItem';
import { useUserStore } from 'src/stores/user-store';
const router = useRouter();
const userId = router.currentRoute.value.params.id as string;
const userStore = useUserStore();
const currentUser = computed(() => userStore.targetUser);
const menus = ref<PageLeftItem[]>([
  { label: 'Home', routeName: 'UserHome' },
  { label: 'Uploads', routeName: 'UserUploads' },
  { label: 'Playlists', routeName: 'UserPlaylists' },
  { label: 'About', routeName: 'UserAbout' },
]);
async function onMenuChange(info: PageLeftItem) {
  await router.replace({ name: info.routeName, params: { id: userId } });
}
onBeforeMount(async () => {
  if (userId) {
    await userStore.getUserInfo(userId);
  }
});
</script>
<style lang="sass" scoped>

.banner
  width: 100%
  height: 205px
  position: relative
  .image
    width: 100%
    height: 100%
    position: absolute
</style>
